<template>
  <!-- 主体区域 -->
  <div id="app">
    <label v-show="IsInputShow">点击编辑</label>
    <input v-show="!IsInputShow" type="text" v-model="inputStr" placeholder="请输入待办事项" ref="ipt" >
    <button @click="handlerEditor">添加</button>


  <!-- <BaseInputWithVModel v-model="inputStr" /> -->
  <!-- <BaseSelectWithVModel :value="selectedCityId" @input="handlerCitySelect"/> -->
  <!-- <BaseSelectWithVModel v-model="selectedCityId" /> -->
   <!-- <inputCom @add-item="handleraddItem"></inputCom>
   <listCom :listData="todos" @deleteItem="handlerdeleteItem"></listCom>
   <footerCom :allCount="allCount" @clearAll="handlerclearAll"></footerCom> -->
   <!-- <BaseSelect :cityId="selectedCityId" @city-select="handlerCitySelect"></BaseSelect> -->
  </div>
</template>

<script>
// import BaseInputWithVModel from './components/BaseInputWithVModel.vue';
// import inputCom from './components/inputCom.vue';
// import footerCom from './components/footerCom.vue';
// import listCom from './components/listCom.vue';
// import BaseSelect from './components/BaseSelect.vue';
// import BaseSelectWithVModel from './components/BaseSelectWithVModel.vue';
export default {
  provide () {
    return {
    color:this.color,
    userInfo:this.userInfo
    }
  },
  data() {
    return {
      IsInputShow:true,
      todos: [
        { id: 1, title: '吃饭', completed: false },
        { id: 2, title: '睡觉', completed: true },
        { id: 3, title: '打豆豆', completed: false },
        ],
      color: '#41b883',
      userInfo:{name:'张三',age:20},
      selectedCityId:102,
      inputStr:'',
    };
  },
  name: 'App',
  components: {
    // BaseInputWithVModel,
    //  BaseSelectWithVModel,
    // BaseSelect,
    // inputCom,
    // footerCom,
    // listCom
   
  },
  methods: {
    handlerEditor(){
      this.IsInputShow = false;
      this.$nextTick(() => {
        this.$refs.ipt.focus();
      });
    },
    handlerCitySelect(cityId){
      this.selectedCityId = cityId;
      console.log(cityId);

    },
    handlerdeleteItem(index) {
      this.todos.splice(index, 1);

      
    },
    handleraddItem(title) {
      this.todos.push({ id: this.todos.length + 1, title: title, completed: false });
    },
    handlerclearAll() {
      this.todos = [];
    }
  },
  computed: {
   allCount(){
     return this.todos.length;
   }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
